<template>
  <div class="policy-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <p class="subtitle">权威发布      ·      国务院政策文件      ·      部委政策文件      ·      地方政策法规</p>
    </div>
    <!-- 分类导航 -->
    <div class="category-nav">
      <div
          v-for="(category, index) in categories"
          :key="index"
          class="nav-item"
          :class="{ active: currentCategory === category.value }"
          @click="currentCategory = category.value"
      >
        {{ category.label }}
      </div>
    </div>

    <!-- 政策列表 -->
    <div class="policy-list">
      <div
          v-for="(item, index) in filteredList"
          :key="index"
          class="policy-item"
      >
        <a :href="item.link" target="_blank" class="policy-title">
          {{ item.title }}
          <span v-if="item.tag" class="policy-tag">{{ item.tag }}</span>
        </a>
        <div class="policy-info">
          <span class="date">{{ item.date }}</span>
          <span class="number">{{ item.number }}</span>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button
          v-for="page in totalPages"
          :key="page"
          :class="{ active: currentPage === page }"
          @click="currentPage = page"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PolicyPage',
  data() {
    return {
      currentCategory: 'all',
      currentPage: 1,
      pageSize: 4,
      categories: [
        { label: '全部', value: 'all' },
        { label: '权威发布', value: 'authority' },
        { label: '国务院', value: 'state' },
        { label: '部委', value: 'ministry' },
        { label: '地方', value: 'local' }
      ],
      policyData: [
        {
          title: '关于进一步加强非物质文化遗产保护工作的意见',
          date: '2023-08-15',
          number: '文旅非遗发〔2023〕12号',
          category: 'authority',
          link: '#',
          tag: '新'
        },
        {
          title: '国家级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'ministry',
          link: '#'
        },
        {
          title: '省级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'state',
          link: '#'
        },
        {
          title: '市级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'local',
          link: '#'
        },
        {
          title: '村级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'ministry',
          link: '#'
        },
        {
          title: '校级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'ministry',
          link: '#'
        },
        {
          title: '1校级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'ministry',
          link: '#'
        },
        {
          title: '校级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'ministry',
          link: '#'
        },
        {
          title: '校级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'ministry',
          link: '#'
        },
        {
          title: '校级非物质文化遗产代表性传承人认定与管理办法',
          date: '2023-05-20',
          number: '文化和旅游部令第3号',
          category: 'ministry',
          link: '#'
        },
      ]
    }
  },
  computed: {
    filteredList() {
      return this.policyData
          .filter(item =>
              this.currentCategory === 'all' ||
              item.category === this.currentCategory
          )
          .slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    totalPages() {
      return Math.ceil(this.policyData.length / this.pageSize)
    }
  }
}
</script>

<style scoped>
body, html {
  margin: 0;
  padding: 0;
  background-color: #eaeaea; /* 设置全局背景颜色 */
}

.policy-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-header {
  text-align: center;
  margin: 50px;
  border-bottom: 3px solid #dc2e2e;;
}

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  color: #666;
  font-size: 16px;
}

.category-nav {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.nav-item {
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s;
}

.nav-item:hover {
  color: #c00;
}

.nav-item.active {
  background: #c00;
  color: white;
}

.policy-list {
  border: 1px solid #e11616;
  border-radius: 4px;

}

.policy-item {
  padding: 20px;
  border-bottom: 1px solid #eee;
  transition: background 0.3s;
}

.policy-item:hover {
  background: #f8f8f8;
}

.policy-title {
  font-size: 16px;
  color: #333;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

.policy-title:hover {
  color: #c00;
}

.policy-tag {
  background: #c00;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: 10px;
}

.policy-info {
  display: flex;
  gap: 20px;
  color: #999;
  font-size: 14px;
}

.pagination {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button:hover {
  border-color: #c00;
  color: #c00;
}

.pagination button.active {
  background: #c00;
  color: white;
  border-color: #c00;
}

@media (max-width: 768px) {
  .policy-page {
    padding: 20px 10px;
  }

  .category-nav {
    flex-wrap: wrap;
    gap: 10px;
  }

  .policy-info {
    flex-direction: column;
    gap: 5px;
  }
}
</style>